<template>
  <view class="page">
	<view class="banner">
		<view class="item">
			<view class="item-con">
				<view class="item-pic bg-1">
					<view class="item-title u-line-1">幼儿14天入门</view>
					<view class="item-sub-title">冠军教练一对一辅导</view>
					<view class="item-icon">
						<i class="iconfont icon-yinger"></i>
					</view>
					<view class="item-favo">
						<u-icon v-if="!isFavo" size="36" color="#fc0" name="star"></u-icon>
						<u-icon v-else size="36" color="#fc0" name="star-fill"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="detail-msg">
		<view class="item-title u-line-2">幼儿14天入门</view>
		<view class="item-score">
			<view class="score-count">
				<u-rate count="5" size="22" :allowHalf="true" v-model="score" active-color="#fc0" inactive-color="#fc0"></u-rate>
				<text>{{score}}</text>
			</view>
			<view class="item-price">￥399.00</view>
		</view>
		<view class="item-desc">
			<view class="item-count">320人正在学</view>
		</view>
	</view>	
	<view class="detail-box">
		<view class="hd-title">
			优惠券
			<view class="hd-val">
				<view>可用优惠券<text class="c-red">1</text>张</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

	</view>
	<view class="detail-box">
		<view class="hd-title">课程设置</view>
		<view class="detail-con">
			<u-collapse>
				<u-collapse-item icon="/static/image/icon-study.png" title="第一周——学习动作">
					<view class="u-collapse-content">
						<view class="item-week">
							<view class="item-day">
								<view class="col-1">01-学习</view>
								<view class="col-2">周一</view>
							</view>
							<view class="item-day">
								<view class="col-1">02-学习</view>
								<view class="col-2">周二</view>
							</view>
							<view class="item-day">
								<view class="col-1">03-学习</view>
								<view class="col-2">周三</view>
							</view>
							<view class="item-day">
								<view class="col-1">04-学习</view>
								<view class="col-2">周四</view>
							</view>
							
						</view>
					</view>
				</u-collapse-item>
				<u-collapse-item icon="/static/image/icon-study.png" title="第二周——憋气练习" name="Docs guide">
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</u-collapse-item>
				<u-collapse-item icon="/static/image/icon-study.png" title="第三周——憋气练习" name="Docs guide">
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</u-collapse-item>
				<u-collapse-item icon="/static/image/icon-study.png" title="第四周——巩固练习" name="Docs guide">
					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
	<view class="detail-box">
		<view class="hd-title">课程介绍</view>
		<view class="detail-con">
			
		</view>
	</view>
	<view class="detail-box">
		<view class="hd-title">教练介绍</view>
		<view class="detail-con">
			
		</view>
	</view>
	<view class="fixed-bottom">
		<view class="footer">
			<view class="total-money">￥399</view>
			<view class="btn">立即购买</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		score:'4.0',
		isFavo:false,
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss">
.page{
	padding-bottom: 150rpx;
}
image{
	width: 100%;
	height: 100%;
}
.c-red{
	color: #f00;
}
.banner{
	background: #fff;
	.item-con{
		padding: 20rpx 50rpx;
		border-radius: 20rpx;
	}
	.item-pic{
		position: relative;
		height: 356rpx;
		border-radius: 10rpx;
		padding: 60rpx 10rpx 30rpx 60rpx;
		.item-title{
			color: #fff;
			padding-right: 20rpx;
			font-weight: 800;
			font-size: 48rpx;
		}
		.item-sub-title{
			margin-top: 20rpx;
			color: #fff;
			font-size: 30rpx;
		}
		.item-icon{
			position: absolute;
			z-index: 10;
			right: -80rpx;
			top: -80rpx;
			width: 240rpx;
			height: 240rpx;
			background: rgba(255,255,255,0.6);
			border-radius: 50%;
			.iconfont{
				position: absolute;
				bottom: 50rpx;
				left: 50rpx;
				font-size: 80rpx;
				color: #fff;
			}
		}
		.item-favo{
			position: absolute;
			width: 90rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 60rpx;
			bottom: -40rpx;
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 0 10rpx rgba(0,0,0,0.2);
		}
	}
	.item-pic.bg-1{
		background: #CC66FF;
		box-shadow: 0 4rpx 10rpx rgba(204,102,255,0.5);
	}
}
.detail-msg{
	background: #fff;
	padding: 20rpx 30rpx;
	.item-title{
		font-size: 36rpx;
		font-weight: bold;
	}
	.item-score{
		margin-left: -8rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.score-count{
			display: flex;
			align-items: center;
		}
		text{
			color: #fc0;
			font-weight: bold;
		}
		.item-price{
			color: #fc0;
			font-weight: bold;
		}
	}
	.item-count{
		font-size: 26rpx;
		margin-top: 10rpx;
		color: #999;
	}
}

.detail-box{
	margin-top: 20rpx;
	background: #fff;
	padding: 20rpx 30rpx;
	.hd-title{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		line-height: 60rpx;
		font-weight: bold;
		&::before{
			content: '';
			height: 34rpx;
			width: 6rpx;
			background: #fc0;
			position: absolute;
			left: -20rpx;
			top: 15rpx;
		}
		.hd-val{
			font-size: 28rpx;
			font-weight: normal;
			color: #999;
			display: flex;
			align-items: center;
		}
	}
	.detail-con{
		padding: 20rpx 0;
	}
}
.item-day{
	display: flex;
	.col-1{
		width: 50%;
		text-align: center;
		padding:10rpx 20rpx;
	}
	.col-2{
		width: 50%;
		padding:10rpx 20rpx;
	}
}
.fixed-bottom{
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 99;
}
.footer{
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	box-shadow: 0 0 10rpx rgba(0,0,0,0.2);
	//border-top: solid 1rpx #ddd;
	.total-money{
		width: 40%;
		color: #f00;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}
	.btn{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: $uni-color-primary;
		color: #fff;
		font-size: 36rpx;
	}
}
</style>
